<template>
  <div class="contextForm">
    <div class="contentLeft">
      <div class="leftTop">
        <div class="top-title">微信扫码预览</div>
        <div class="qcode-wrapper">
          <div>
            <img style="width:110px;height:110px" :src="qrcodeSrc" />
            <img class="big-img" :src="qrcodeSrc" />
          </div>
        </div>
        <div class="qcode-page">
          <p>页面路径：</p>
          <div class="path-word-wrap">{{qrcodePath}}</div>
          <Row type="flex" justify="center" style="margin-bottom: 20px">
            <Button
              type="primary"
              size="small"
              class="copyBtn"
              data-clipboard-action="copy"
              data-clipboard-target=".path-word-wrap"
              @click="CopyContent"
              style="padding: 3px 20px 3px 20px;"
            >复制地址</Button>
          </Row>
          <!-- <Row
            v-if="this.$route.params.jobId.bak"
            type="flex"
            justify="center"
            style="margin-bottom: 20px"
          >
            <Button type="primary" size="small" @click="downLoadQrcode">下载高清码</Button>
          </Row>-->
        </div>
      </div>
    </div>
    <div class="contentRight">
      <Form :model="formItem" :label-width="100" class="consumerForm" label-position="left">
        <div class="item-title">基本信息</div>
        <FormItem label="企业名称" style="width:300px">
          <Select v-model="formItem.company_id" filterable @on-query-change="queryCompany">
            <Option
              v-for="(item,index) in companyList"
              :value="item.company_id"
              :key="index"
            >{{ item.title }}</Option>
          </Select>
        </FormItem>
        <FormItem label="职位类别">
          <Select v-model="formItem.industry_id" style="width:300px" @on-change="getTwoMenu">
            <Option
              v-for="(item,index) in oneMenu"
              :key="index"
              :value="item.industry_id"
            >{{item.industry_title}}</Option>
          </Select>
          <Select
            v-model="formItem.position.position_id"
            style="width:300px"
            @on-change="getPosition"
          >
            <Option
              v-for="(item,index) in twoMenu"
              :key="index"
              :value="item.position_id"
            >{{item.position_title}}</Option>
          </Select>
        </FormItem>
        <FormItem label="职位名称" style="width:340px">
          <Input v-model="formItem.job_title" placeholder="自定义职位名称，不填默认展示职位类别"></Input>
        </FormItem>
        <FormItem label="招聘人数">
          <div style="display:flex;">
            <Input v-model="formItem.recruits_number" style="width:100px;"></Input>
            <span>&nbsp&nbsp人</span>
            <!-- <CheckboxGroup v-model="formItem.checkbox" style="margin-left: 60px">
            <Checkbox label="多名"></Checkbox>
            </CheckboxGroup>-->
          </div>
        </FormItem>
        <FormItem label="职位性质">
          <RadioGroup v-model="formItem.job_type">
            <Radio label="1">全职</Radio>
            <Radio label="2">兼职</Radio>
            <Radio label="3">实习</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="薪资范围">
          <div style="display:flex;">
            <Select v-model="formItem.salary_unit" style="width:100px">
              <Option v-for="(item,index) in salaryType" :key="index" :value="index+1">{{item}}</Option>
              <Option :value="4">面议</Option>
            </Select>
            <Input
              v-if="formItem.salary_unit != 4"
              v-model="formItem.salary_min"
              style="width:100px;margin-left: 40px"
            ></Input>
            <span v-if="formItem.salary_unit != 4">&nbsp&nbsp~&nbsp&nbsp</span>
            <Input
              v-if="formItem.salary_unit != 4"
              v-model="formItem.salary_max"
              style="width:100px"
            ></Input>
            <!-- <CheckboxGroup v-model="formItem.checkbox" style="margin-left: 60px;width:200px">
            <Checkbox label="面议"></Checkbox>
            </CheckboxGroup>-->
          </div>
        </FormItem>
        <FormItem label="福利待遇">
          <CheckboxGroup v-model="formItem.jobTags" style="width:50%;display:flex;flex-flow:wrap">
            <Checkbox v-for="(item,index) in tagArr" :key="index" :label="index">{{item}}</Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="职位描述">
          <Input
            v-model="formItem.job_description"
            type="textarea"
            :autosize="{minRows: 5,maxRows: 10}"
            placeholder="Enter something..."
            style="width:600px"
          />
        </FormItem>
        <div class="item-title">其他信息</div>
        <FormItem label="职位要求">
          <Select v-model="formItem.job_education" style="width:150px">
            <Option v-for="(item,index) in educationArr" :key="index" :value="index">{{item}}</Option>
          </Select>
          <Select v-model="formItem.gender" style="width:150px">
            <Option v-for="(item,index) in gender" :key="index" :value="index">{{item}}</Option>
          </Select>
        </FormItem>
        <FormItem label="工作经验">
          <!-- <Select v-model="formItem.resume_price" style="width:300px">
          <Option value="beijing">New York</Option>
          <Option value="shanghai">London</Option>
          <Option value="shenzhen">Sydney</Option>
          </Select>-->
          <div style="display:flex;">
            <Input v-model="formItem.job_experience_min" style="width:150px"></Input>
            <span>&nbsp&nbsp~&nbsp&nbsp</span>
            <Input v-model="formItem.job_experience_max" style="width:150px"></Input>
            <span>&nbsp&nbsp年</span>
          </div>
        </FormItem>
        <FormItem label="年龄选择">
          <div style="display:flex;">
            <Input v-model="formItem.age_min" style="width:150px"></Input>
            <span>&nbsp&nbsp~&nbsp&nbsp</span>
            <Input v-model="formItem.age_max" style="width:150px"></Input>
            <span>&nbsp&nbsp岁</span>
            <!-- <CheckboxGroup v-model="formItem.checkbox" style="margin-left: 60px;width:200px">
            <Checkbox label="面议"></Checkbox>
            </CheckboxGroup>-->
          </div>
        </FormItem>
        <FormItem label="悬赏金额">
          <!-- <Select v-model="formItem.resume_price" style="width:300px">
          <Option value="beijing">New York</Option>
          <Option value="shanghai">London</Option>
          <Option value="shenzhen">Sydney</Option>
          </Select>-->
          <Input v-model="formItem.resume_price" style="width:300px"></Input>
          <span>&nbsp&nbsp元</span>
        </FormItem>
        <FormItem label="联系电话" style="width:300px">
          <Input v-model="formItem.phone" type="text"></Input>
        </FormItem>
        <div class="item-title">其他信息</div>
        <FormItem label="虚拟浏览人数" style="width:350px">
          <Input v-model="formItem.avatar_pv" placeholder="请输入虚拟浏览人数"></Input>
        </FormItem>
        <FormItem label="绑定社群" style="width:380px">
          <Select v-model="formItem.reply_id" filterable @on-query-change="miniKeywordReplyList">
            <Option
              v-for="(item,index) in replyList"
              :value="item.reply_id"
              :key="index"
            >{{ item.name }}</Option>
          </Select>
          <span>简历选择绑定社群，不选则该职位不进行社群功能</span>
        </FormItem>
        <div class="item-title">自定义分享配置</div>
        <Form :model="shareItem" :label-width="120" class="shopForm">
          <FormItem label="分享标题">
            <Input v-model="shareItem.title" placeholder="请输入分享标题" style="width:300px;"></Input>
          </FormItem>
          <FormItem label="H5分享内容">
            <Input v-model="shareItem.h5_content" placeholder="请输入H5分享内容" style="width:300px;"></Input>
          </FormItem>
          <FormItem label="H5分享Icon" prop="img">
            <div v-if="shareItem.h5_icon" class="brand-item-logo disFlex" style="width:125px">
              <img :src="shareItem.h5_icon" />
              <!-- <img v-for="(item,index) in formItem.qualification_images" :src="item.auth_image" /> -->
              <upload :multiple="true" :spread="true" @confirmUpload="changeIcon"></upload>
            </div>
            <div
              v-else
              class="brand-item-environment new-add-brand-item-environment disFlex Flex-middle Flex-center"
              style="margin: 0;width:125px"
            >
              <span>+ 添加图片</span>
              <upload :multiple="true" :spread="true" @confirmUpload="changeIcon"></upload>
            </div>
          </FormItem>
          <FormItem label="小程序分享图片" prop="img">
            <div v-if="shareItem.weapp_img" class="brand-item-logo disFlex" style="width:125px">
              <img :src="shareItem.weapp_img" />
              <!-- <img v-for="(item,index) in formItem.qualification_images" :src="item.auth_image" /> -->
              <upload :multiple="true" :spread="true" @confirmUpload="changeImg"></upload>
            </div>
            <div
              v-else
              class="brand-item-environment new-add-brand-item-environment disFlex Flex-middle Flex-center"
              style="margin: 0;width:125px"
            >
              <span>+ 添加图片</span>
              <upload :multiple="true" :spread="true" @confirmUpload="changeImg"></upload>
            </div>
          </FormItem>
        </Form>
        <FormItem>
          <Button v-if="jobId" type="primary" @click="savePost">保存</Button>
          <Button v-else type="primary" @click="creatPost">创建</Button>
          <Button v-if="formItem.review_status == 2" type="primary" @click="action(1)">通过</Button>
          <Button v-if="formItem.review_status == 2" type="error" @click="action(3)">拒绝</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import { JobEdit, JobAudit, JobCreate, jobFileUrl } from "api/recuit/job";
import { Tag, Industry } from "api/recuit/public";
import { CompanyList, MiniKeywordReplyList } from "api/recuit/bussiness";
import Config from "@/config";
import Clipboard from "clipboard";
import { downloadIamge } from "common/js/util";
import upload from "base/upload/upload";

export default {
  name: "",
  data() {
    return {
      shareItem: {
        id: 2,
        page: "jobDetail",
        name: "职位详情",
        title: "",
        h5_content: "",
        h5_icon: "",
        weapp_img: ""
      },
      formItem: {
        age_max: "",
        age_min: "",
        company_id: "",
        gender: "0",
        industry_id: "",
        industry_title: "",
        jobTags: [],
        job_description: "",
        job_education: "",
        job_experience_max: "",
        job_experience_min: "",
        job_type: "1",
        phone: "",
        position: { position_id: "", position_title: "" },
        position_id: "",
        position_title: "",
        position_id: "",
        recruits_number: "",
        resume_price: "",
        review_status: "1",
        salary_max: "",
        salary_min: "",
        salary_unit: "",
        title: "",
        avatar_pv: "",
        reply_id: ""
      },
      gender: ["性别不限", "男", "女"],
      salaryType: ["月薪", "日薪", "时薪"],
      oneMenu: [], //行业一级菜单
      twoMenu: [], //行业二级菜单
      educationArr: [
        "学历不限",
        "小学",
        "初中",
        "中专",
        "高中",
        "大学专科",
        "大学本科",
        "硕士",
        "博士",
        "博士后",
        "其它"
      ],
      experienceArr: [
        "经验不限",
        "无经验",
        "1年",
        "2年",
        "3年",
        "4年",
        "5年",
        "6年",
        "7年",
        "8年",
        "9年",
        "10年"
      ],
      tagArr: [],
      jobId: "",
      jobInfo: {},
      companyKeyword: "",
      companyList: [],
      replyList: [],
      qrcodeSrc: "",
      qrcodePath: ""
    };
  },
  components: { upload },
  mounted() {
    if (this.$route.params.jobId) {
      this.jobId = this.$route.params.jobId;
    }

    this.$nextTick(() => {
      this.qrcodeSrc =
        Config.recuitUrl +
        "/common/miniprogramQrcode?qrcodePath=subPackages/subPackageS/jobInfo/jobInfo&qrcodeWidth=300&qrcodeScene=job-" +
        this.jobId;
      this.qrcodePath =
        "subPackages/subPackageS/jobInfo/jobInfo?debug=debug&companyJobId=" +
        this.jobId;
    });

    this.miniKeywordReplyList();
    this.queryCompany();
    Tag().then(result => {
      this.tagArr = result;
      if (this.$route.params.jobId) {
        this.getData();
      }
    });
    Industry().then(result => {
      for (let i = 0; i < result.length; i++) {
        this.oneMenu.push(result[i]);
      }
    });
  },
  methods: {
    // 搜索社群
    miniKeywordReplyList(keyword) {
      let data = {};
      if (typeof keyword != "undefined") {
        data = {
          keyword
        };
      }
      MiniKeywordReplyList(data).then(result => {
        this.replyList = result.replyData;
      });
    },
    //点击实现行业二级菜单
    getTwoMenu(industry_id) {
      let oneMenu = this.oneMenu;
      for (let i = 0; i < oneMenu.length; i++) {
        if (industry_id == oneMenu[i].industry_id) {
          this.twoMenu = oneMenu[i].position;
        }
      }
      this.formItem.industry_id = industry_id;
    },
    getPosition(position_id) {
      this.formItem.position_id = position_id;
    },
    // 搜索企业
    queryCompany(companyKeyword,page=1) {
      let data = "";
      if (typeof companyKeyword != "undefined") {
        data = companyKeyword;
      }
      CompanyList({ companyKeyword: data,page }).then(result => {
        for (let i = 0; i < result.companyList.length; i++) {
          this.companyList.push(result.companyList[i]);
        }
        if(Number(result.page.page) < result.page.pageTotal){
          let numPage = Number(result.page.page)
          this.queryCompany(companyKeyword,++numPage)
        }
      });
    },
    getData() {
      JobEdit({ jobId: this.jobId })
        .then(result => {
          this.formItem = result;
          let temp = [];

          //福利初始
          for (let i = 0; i < result.jobTags.length; i++) {
            temp.push(result.jobTags[i].tag_type.toString(10));
          }

          //处理分享配置信息
          if (result.job_transmit_card) {
            this.shareItem = JSON.parse(result.job_transmit_card);
          }

          //企业初始
          this.jobTags = result.jobTags;
          this.getTwoMenu(result.industry_id);
          this.formItem.jobTags = temp;
          this.formItem.job_type = this.formItem.job_type.toString(10);
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    // 通过
    action(type) {
      JobAudit({ jobId: this.jobId, auditStatus: type }).then(result => {
        this.$Message.success("职位已通过");
        setTimeout(() => {
          this.getData(this.jobId);
        }, 1500);
      });
    },
    //更新职位
    savePost() {
      this.$Loading.start();
      let dataList = JSON.parse(JSON.stringify(this.formItem));
      let tagArr = this.jobTags;
      let jobTags = JSON.parse(JSON.stringify(dataList.jobTags));
      dataList.jobTags = [];
      //福利修改操作
      for (let i = 0; i < tagArr.length; i++) {
        for (let j = 0; j < jobTags.length; j++) {
          if (tagArr[i].tag_type == jobTags[j]) {
            break;
          } else if (
            tagArr[i].tag_type != jobTags[j] &&
            j == jobTags.length - 1
          ) {
            let temp = {
              job_tag_id: tagArr[i].job_tag_id,
              tag_type: tagArr[i].tag_type,
              tag_status: 0
            };
            dataList.jobTags.push(temp);
          }
        }
      }
      if (jobTags.length) {
        for (let j = 0; j < jobTags.length; j++) {
          let no = 0;
          if (tagArr.length) {
            for (let i = 0; i < tagArr.length; i++) {
              if (tagArr[i].tag_type == jobTags[j]) {
                let temp = {
                  job_tag_id: tagArr[i].job_tag_id,
                  tag_type: tagArr[i].tag_type,
                  tag_status: 1
                };
                dataList.jobTags.push(temp);
              } else {
                no++;
                if (no == tagArr.length) {
                  let temp = {
                    tag_type: jobTags[j],
                    tag_status: 1
                  };
                  dataList.jobTags.push(temp);
                }
              }
            }
          } else {
            let temp = {
              tag_type: jobTags[j],
              tag_status: 1
            };
            dataList.jobTags.push(temp);
          }
        }
      } else {
        for (let i = 0; i < tagArr.length; i++) {
          let temp = {
            job_tag_id: tagArr[i].job_tag_id,
            tag_type: tagArr[i].tag_type,
            tag_status: 0
          };
          dataList.jobTags.push(temp);
        }
      }

      //分享配置处理
      dataList.job_transmit_card = JSON.stringify(this.shareItem);

      JobCreate(dataList)
        .then(result => {
          this.$Message.success("保存成功");
          this.$Loading.finish();
          setTimeout(() => {
            this.$router.replace("/consumerPost/postCharge/postCharge");
          }, 1500);
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },

    //创建职位
    creatPost() {
      this.$Loading.start();
      let dataList = JSON.parse(JSON.stringify(this.formItem));
      let jobTags = dataList.jobTags;
      dataList.jobTags = [];
      //福利修改操作
      for (let j = 0; j < jobTags.length; j++) {
        let temp = {
          tag_type: jobTags[j],
          tag_status: 1
        };
        dataList.jobTags.push(temp);
      }
      console.log(dataList, "创建");
      JobCreate(dataList)
        .then(result => {
          this.$Message.success("创建成功");
          this.$Loading.finish();
          setTimeout(() => {
            this.$router.replace("/consumerPost/postCharge/postCharge");
          }, 1500);
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },

    //复制地址
    CopyContent() {
      var clipboard = new Clipboard(".copyBtn");
      clipboard.on("success", e => {
        this.$Message.success("复制路径成功");
        clipboard.destroy();
      });
    },
    //下载图片二维码
    downLoadQrcode() {
      const msg = this.$Message.loading({
        content: "获取中...",
        duration: 0
      });

      jobFileUrl({
        qrcodePath: "subPackages/subPackageS/jobInfo/jobInfo",
        qrcodeWidth: "500",
        qrcodeScene: "job-" + this.jobId,
        outputType: "fileUrl"
      })
        .then(result => {
          console.log(result);
          // downloadIamge(result.url)
          setTimeout(msg, 0);
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    changeIcon(_url) {
      this.shareItem.h5_icon = _url[0];
    },
    changeImg(_url) {
      this.shareItem.weapp_img = _url[0];
    }
  }
};
</script>

<style scoped lang="less">
.brand-item-logo {
  width: 125px;
  height: 100px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  top: 0;
  left: 0;

  img {
    width: 100%;
  }
}
.brand-item-environment {
  width: 214px;
  height: 120px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 15px;
  overflow: hidden;
  margin-top: 10px;

  &:nth-of-type(2n + 1) {
    margin-left: 0;
  }

  img {
    width: 100%;
    height: 100%;
    float: left;
  }

  & > .close {
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #fff;
  }
}

.old-brand-item-environment {
  margin-left: 0;
  cursor: pointer;
}

.new-add-brand-item-environment {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 15px;
  overflow: hidden;
  margin-left: 15px;
  cursor: pointer;
  width: 125px;
  height: 100px;
  margin-top: 29px;

  &:nth-of-type(2n + 1) {
    margin-left: 0;
  }

  img {
    width: 100%;
    height: 100%;
    float: left;
  }

  & > .close {
    background: red;
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    color: #fff;
  }
}
.contextForm {
  padding: 2%;
  background: white;
  display: flex;
  flex-direction: row;
  .contentLeft {
    border: 1px solid #f5f5f5; //border-right
    width: 16.66666667%;
    .leftTop {
      width: 100%;
      height: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;

      .top-title {
        font-size: 14px;
        line-height: 16px;
        padding: 16px 24px;
        color: #515a6e;
        text-align: center;
      }

      .qcode-wrapper {
        margin: 0px 65px 15px 65px;
        height: 124px;
        text-align: center;
        background-repeat: no-repeat;
        background-size: 124px 124px;
        background-position: center;
        &:hover {
          .big-img {
            display: block;
          }
        }
        .big-img {
          /* width: 200%; */
          position: absolute;
          left: 35%;
          top: 0%;
          z-index: 9999;
          display: none;
          background-color: white;
        }
      }
      .qcode-page {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        .path-word-wrap {
          text-align: center;
          margin: 10px 0px;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
          width: 70%;
        }
      }
    }
  }
  .contentRight {
  }
  .item-title {
    margin-bottom: 20px;
    padding: 8px 16px;
    font-weight: bolder;
    background-color: #f5f5f5;
    color: #333;
  }
  .alert {
    color: rgb(153, 153, 153);
    margin-top: 15px;
  }
  .ivu-form-item {
    margin-bottom: 15px;
    margin-left: 35px;
  }
}
</style>
